<template>
  <el-container>
    <el-header>Header</el-header>
    <el-main style="background: #f2f2f2;">
      <el-main class="main">
        <!-- 查詢 -->
        <div class="piling">
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item>
              <el-input v-model="formInline.user" placeholder="广告名称" />
            </el-form-item>
            <el-form-item>
              <el-select v-model="formInline.region" placeholder="请选择">
                <el-option label="首页轮播" />
                <el-option label="天上" />
                <el-option label="页面底部" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="searchBtn">查询</el-button>
              <el-button @click="add">添加广告</el-button>
            </el-form-item>
          </el-form>
          <el-select v-model="a" placeholder="选择操作" @change="selectBtn">
            <el-option value="0" label="上线" />
            <el-option value="1" label="下线" />
            <el-option value="2" label="删除" />
          </el-select>
          <el-button class="btn" @click="bulkOperations">批量操作</el-button>
          <el-button class="btn" @click="redict">清空</el-button>
        </div>
        <!-- 表格 -->
        <el-row style="padding-top: 20px;">
          <el-col :span="24">
            <el-table
              :data="state.tableData"
              border
              style="width: 100%;"
              @selection-change="selectChange"
            >
              >
              <el-table-column
                type="selection"
                :value="val"
                :label="state.checkBox"
              ></el-table-column>
              <el-table-column
                prop="id"
                label="编号"
                align="center"
                width="70"
              />
              <el-table-column prop="name" label="广告名称" align="center" />
              <el-table-column prop="address" label="广告位置" align="center" />
              <el-table-column label="广告图片" align="center">
                <template #default="scope">
                  <el-image
                    style="width: 100px; height: 100px;"
                    :src="scope.row.imageUrl"
                  />
                </template>
              </el-table-column>
              <el-table-column
                prop="endTime"
                label="时间"
                align="center"
                :formatter="dateFormat"
              />
              <el-table-column prop="state" label="上线/下线" align="center" />
              <el-table-column
                prop="numberOfClicks"
                label="点击次数"
                align="center"
                width="70"
              />
              <el-table-column prop="address" label="操作" align="center">
                <template #default="scope">
                  <el-button type="text" @click="edit">编辑</el-button>
                  <el-button
                    type="text"
                    @click="deleteA(scope.index, scope.row.id)"
                  >
                    删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
        <!-- 分页 -->
        <div>
          <el-row style="padding-top: 20px;">
            <el-col :span="24" class="pagination">
              <el-pagination
                :current-page="state.currentPage"
                :page-size="state.pageSize"
                layout="total, prev, pager, next"
                :total="state.total"
                @current-change="handleCurrentChange"
              />
            </el-col>
          </el-row>
        </div>
      </el-main>
    </el-main>
  </el-container>
</template>

<script lang="ts" setup>
import { ElMessageBox, ElMessage } from 'element-plus'
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { adviceList, deleteAdvice, deletes, modifies, searchAdvice } from '../http/api'

const formInline: any = reactive({
  user: '',
  region: '',
})
var a = ref()
var val = ref()
const formInline1: any = reactive({
  advertising: '',
})
var state: any = reactive({
  tableData: [],
  ids: [],
  currentPage: 1,
  pageSize: 4,
  page: 1,
  total: 3,
})
const updateStateDto = reactive({ ids: [], state: '' })
const checked1 = ref(true)
onMounted(() => {
  getAdvertiseList()
})
const redict: Function = () => {
  a.value = ''
}
const router: any = useRouter()
function add() {
  router.push({ path: 'addAdvertising', query: { msg: '新增' } })
}
function edit() {
  router.push({ path: 'editAdvertising', query: { msg: '编辑' } })
}
const handleCurrentChange = (val: number) => {
  state.currentPage = val
  getAdvertiseList()
}
// 获取列表
const getAdvertiseList: any = () => {
  adviceList({ page: state.currentPage, limit: state.pageSize }).then(
    (res: any) => {
      console.log(res.data)
      state.tableData = res.data
      state.total = res.count
    },
  )
}
//搜索列表
const searchBtn: any = () => {
  // console.log(formInline)
  console.log(state.tableData)
  searchAdvice({
    page: 1,
    limit: 9,
    name: formInline.user,
    address: formInline.region,
  }).then((res) => {
    // console.log(res)
    state.tableData = res.data.data
  })
}
//删除广告
const deleteA: any = (index, id) => {
  ElMessageBox.confirm('确定要删除此项吗？？', '提示！！！！', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(() => {
      ElMessage({
        type: 'success',
        message: '删除成功',
      })
      deleteAdvice({ id: id }).then((res) => {
        getAdvertiseList()
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '操作取消',
      })
    })
}
//批量操作
const bulkOperations: Function = () => {
  if (a.value == 0) {
    //上线
    ElMessageBox.confirm('确定要修改所选的这几项吗？？', '提示！！！！', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }).then(() => {
      ElMessage({
        type: 'success',
        message: '修改成功',
      })
      modifies({ ids: JSON.parse(JSON.stringify(state.ids)),state:'上线' }).then((res) => {
        getAdvertiseList()
      })
    })
  } else if (a.value == 1) {
    //下线
    ElMessageBox.confirm('确定要修改所选的这几项吗？？', '提示！！！！', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }).then(() => {
      ElMessage({
        type: 'success',
        message: '修改成功',
      })
      modifies({ ids: JSON.parse(JSON.stringify(state.ids)),state:'下线' }).then((res) => {
        getAdvertiseList()
      })
    })
  } else if (a.value == 2) {
    console.log(JSON.parse(JSON.stringify(state.ids)));
    // 删除
    ElMessageBox.confirm('确定要删除所选的这几项吗？？', '提示！！！！', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }).then(() => {
      ElMessage({
        type: 'success',
        message: '删除成功',
      })
      deletes({ ids: JSON.parse(JSON.stringify(state.ids)) }).then((res) => {
        getAdvertiseList()
      })
    })
  }
}
const selectChange: any = (val) => {
  val.forEach((el) => {
    state.ids.push(el.id)
  })
  console.log(JSON.parse(JSON.stringify(state.ids)))
}
const selectBtn: Function = (el) => {
  a.value = el
}
//转换时间
const dateFormat = (row, column) => {
  var date = new Date(row.endTime)
  var year = date.getFullYear()
  var month =
    date.getMonth() < 9
      ? '0' + (date.getMonth() + 1)
      : '' + (date.getMonth() + 1)
  var day = date.getDate() < 10 ? '0' + date.getDate() : '' + date.getDate()
  var hour = date.getHours() < 10 ? '0' + date.getHours() : '' + date.getHours()
  var minutes =
    date.getMinutes() < 10 ? '0' + date.getMinutes() : '' + date.getMinutes()
  var seconds =
    date.getSeconds() < 10 ? '0' + date.getSeconds() : '' + date.getSeconds()
  return (
    year + '-' + month + '-' + day + ' ' + hour + ':' + minutes + ':' + seconds
  )
}
</script>

<style scoped>
.main {
  background-color: white;
  border-radius: 10px;
}
.pagination {
  display: flex;
  justify-content: space-between;
}
.all {
  font-size: 12px;
  display: flex;
  align-items: center;
}
.all-1 {
  margin: 0 20px;
}
.select {
  width: 99px;
}
.btn {
  margin: 0 20px;
}
.piling {
  display: flex;
}
.btn {
  margin-left: 20px;
}
</style>
